<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React startup</title>
  <style>
    .test {
      color: purple;
    }
  </style>
</head>
<body>
  <div id="root"></div>
  <script src="./js/react.dev.js"></script>
  <script src="./js/react-dom.dev.js"></script>
  <script src="./js/babel.js"></script>
  <script type="text/babel">

    const text = 'Please click me!';
    const styleObject = {
      background: 'green'
    };
    const isLogin = false;

    // 按钮组件
    function LikeButton() {
      return (
        <button 
          onClick={() => { console.log('button cliked'); }}
          style={styleObject}
        >{ text }</button>
      )
    };
    // 子组件
    function ChildComponent({count, setCount}) {
      return (
        <div>
          <button onClick={() => { setCount(count + 1) }}>控制父组件页面状态</button>
        </div>
      )
    };
    // 登录组件
    function Login() {
      return (<div>Already Login!</div>);
    }
    // 非登录组件
    function UnLogin() {
      return (<div>Havent Login!</div>);
    }

    function MyApp() {
      const [count, setCount] = React.useState(0);
      const content = isLogin? <Login /> : <UnLogin />;
      const other = <button className="test" onClick={() => { setCount(count + 1) }}>改变当前页面状态</button>
      return (
        <div>
          <h1>Hello React</h1>
          <LikeButton></LikeButton>
          {content}
          <h2>父组件控制页面当前状态</h2>
          {other}
          <h2>子组件控制页面当前状态</h2>
          <ChildComponent count={count} setCount={setCount} />
          <h2>页面当前状态</h2>
          {count}
        </div>
      )
    }
    const rootNode = document.getElementById('root');
    const root = ReactDOM.createRoot(rootNode);
    root.render(React.createElement(MyApp));
  </script>
</body>
</html>